<template>
  <div class="content">
    <!-- // 1. 新建组件
// 2. 安装echarts
// 3. 在封装组件的div上定义id属性，值为main
// 4. 在封装组件导入echarts
// 5. 在methods中定义渲染echarts的方法
// 6. 拷贝所需要的echarts案例中的代码，放在渲染方法中，将数据定义为父组件中传递的属性
// 7. 使用props接收父组件传递的数据
// 8. 侦听父组件传递的参数的变化，如果一旦发生变化就在handler中调用渲染echarts的方法 
// 注意： 父组件传递的数据的属性名称一定要和子组件中渲染时使用的属性对应 -->
    <div class="top">
      <el-row :gutter="12">
        <el-col :span="6" v-for="(item, index) in formObj" :key="index">
          <el-card shadow="always">
            <Companel :sendEcharts="item"></Companel>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="btm">
      <el-card class="box-card">
        <com-echarts :sendOption="sendObj"></com-echarts>
      </el-card>
    </div>
  </div>
</template>

<script>
import { api_homequery } from "../../api/home";
import ComEcharts from "../../components/comEcharts";
import Companel from "../../components/companel";
export default {
  components: {
    ComEcharts,
    Companel,
  },
  data() {
    return {
      formObj: [
        { icon: "icon-dingdan1", count: 10000, title: "总订单", color: "blue" },
        {
          icon: "icon-dangrixiaoshoue",
          count: 10000,
          title: "总销售额",
          color: "red",
        },
        {
          icon: "icon-dingdan",
          count: 10000,
          title: "今日订单数",
          color: "yellow",
        },
        {
          icon: "icon-a-icon-xiaoshoue-fuben",
          count: 10000,
          title: "今日销售额",
          color: "pink",
        },
      ],
      sendObj: {
        title: "数据视图",
        legend: ["订单", "金额"],
        xAxis: [],
        series: [],
      },
    };
  },
  mounted() {
    this.query();
  },

  methods: {
    // amountData: (7) [220, 282, 191, 234, 290, 330, 310]
    // orderData: (7) [120, 132, 101, 134, 90, 230, 210]
    // todayOrder: 189
    // totalAmount: 202466
    // totalOrder: 5486
    // totayAmount: 2189
    // xData: (7) ['2019/11/17
    async query() {
      let rst = await api_homequery();
      let {
        todayOrder,
        totalAmount,
        totalOrder,
        totayAmount,
        amountData,
        orderData,
        xData,
      } = rst;
      [todayOrder, totalAmount, totalOrder, totayAmount].forEach(
        (item, index) => {
          this.formObj[index].count = item;
        }
      );
      this.sendObj.xAxis = xData;
      this.sendObj.series = [amountData, orderData].map((item, index) => {
        return {
          name: this.sendObj.legend[index],
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: item,
        };
      });
      console.log(this.sendObj);
    },
  },
};
</script>

<style lang="less" scoped>
#main {
  min-width: 31.25rem;
  min-height: 31.25rem;
  // max-height: 500px;
}
#maychar {
  max-height: 500px;
  // max-height: 400px;
  height: 500px;
}
.box-card {
  margin-top: 20px;
}
</style>
